<template>
	<view class="page">
		<view class="list-box">
			<list-item v-for="(item,index) in listData" :key="item.goods_id" :options="item" />
		</view>
		<uni-load-more :status="loadStatus"></uni-load-more>
	</view>
</template>

<script>
	import {getGoodsGroupListApi} from '@/api/goods.js'
	import ListItem from '@/pages/aPackage/goodsGroupList/components/listItem/listItem.vue'
	export default {
		components: {
			ListItem
		},
		data() {
			return {
				page: 1,
				isLoadEnd: false,
				listData: [],
				loadStatus: 'more'
			};
		},
		onLoad() {
			this.getListData()
		},
		onPullDownRefresh() {
			this.page = 1
			this.isLoadEnd = false
			this.getListData()
		},
		onReachBottom() {
			if(this.isLoadEnd) return
			this.page++
			this.getListData()
		},
		methods: {
			async getListData() {
				this.loadStatus = 'loading'
				const res = await getGoodsGroupListApi({
					page: this.page
				})
				this.loadStatus = 'more'
				const {pagetotal = 1, list = []} = res.data
				if(this.page >= pagetotal) {
					this.loadStatus = 'no-more'
					this.isLoadEnd = true
				}
				if(this.page === 1) {
					this.listData = list
					return
				}
				this.listData = this.listData.concat(list)
			}
		}
	}
</script>

<style lang="scss" scoped>
.page {
	padding-top: 20rpx;
	background-color: #f5f5f5;
	min-height: 100vh;
	padding-bottom: 60rpx;
	box-sizing: border-box;
	padding-left: 15rpx;
	padding-right: 15rpx;
}
.list-box {
	display: flex;
	flex-wrap: wrap;
	.item-box {
		width: 375rpx;
		padding: 20rpx;
		box-sizing: border-box;
		&_cover {
			width: 100%;
			height: 350rpx;
		}
		&_name {
			font-size: 28rpx;
			color: #333333;
			margin-top: 20rpx;
		}
		&_price {
			font-size: 24rpx;
			color: #f2270c;
			margin-top: 10rpx;
		}
	}
}
</style>
